<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加子部门 - HRM系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/department-add-child.css}">
</head>
<body>
<div class="dashboard">
    <header class="header">
        <div class="logo">HRM系统</div>
        <div class="user-info">
            <span th:text="${currentUser.realName}"></span>
            <span class="role-badge" th:text="${currentUser.roleId.roleName}"></span>
            <a href="/logout" class="logout-btn">退出</a>
        </div>
    </header>
    <main class="department-add-container">
        <!-- 返回按钮 -->
        <div class="back-container">
            <a th:href="@{/department}" class="btn btn-back">← 返回部门列表</a>
            <a th:href="@{/home}" class="btn btn-back">← 返回首页</a>
        </div>

        <!-- 页面标题 -->
        <div class="module-header">
            <h1 class="module-title">添加子部门</h1>
            <div class="parent-dept-info">
                <span>上级部门：</span>
                <span th:text="${parentDepartment.departmentName}"></span>
            </div>
        </div>

        <!-- 添加部门表单 -->
        <div class="department-form-card">
            <form id="addChildDepartmentForm" th:action="@{/department/add-child/{id}(id=${parentDepartment.departmentID})}" method="post">
                <div class="form-group">
                    <label for="departmentName">部门名称</label>
                    <input type="text" id="departmentName" name="departmentName" required
                           placeholder="请输入部门名称" maxlength="50">
                    <div class="error-message" id="nameError"></div>
                </div>

                <div class="form-group">
                    <label for="departmentCode">部门代码</label>
                    <input type="text" id="departmentCode" name="departmentCode" required
                           placeholder="请输入部门代码" maxlength="20">
                    <div class="error-message" id="codeError"></div>
                </div>

                <div class="form-group">
                    <label for="departmentHeadID">部门负责人</label>
                    <select id="departmentHeadID" name="departmentHeadID">
                        <option value="">-- 请选择负责人 --</option>
                        <option th:each="user : ${eligibleHeads}"
                                th:value="${user.userId}"
                                th:text="${user.realName + ' (' + user.username + ')'}"></option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="departmentIntroduction">部门介绍</label>
                    <textarea id="departmentIntroduction" name="departmentIntroduction"
                              placeholder="请输入部门介绍" rows="4"></textarea>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-secondary" onclick="window.history.back()">取消</button>
                </div>
            </form>
        </div>
    </main>
</div>
<script th:src="@{/js/department-add-child.js}"></script>
</body>
</html>